﻿@page "/admin/account"
@using System.Globalization
@inject IMediator Mediator
@{
    ViewBag.Title = "Account";
    var loginHistoryList = await Mediator.Send(new GetLoginHistoryQuery());
}

@section scripts {
    <script type="module">
        import * as utils from '/js/app/utils.module.js'

        var resetPasswordModal = new bootstrap.Modal('#resetPasswordModal');

        window.resetPassword = function () {
            document.querySelector('#resetpassword-form').reset();
            resetPasswordModal.show();
        }

        window.handleResetPasswordFormSubmit = function (event) {
            event.preventDefault();

            const data = new FormData(event.target);
            const value = Object.fromEntries(data.entries());

            callApi(`/api/settings/password/local`,
                'PUT',
                value,
                (resp) => {
                    document.querySelector('#resetpassword-form').reset();
                    resetPasswordModal.hide();
                    blogToast.success('Password updated.');
                });
        }

        const resetPasswordForm = document.querySelector('#resetpassword-form');
        resetPasswordForm.addEventListener('submit', handleResetPasswordFormSubmit);
    </script>
}

@section admintoolbar {
    <div class="admin-toolbar pb-2 border-bottom mb-3">
        <a class="btn btn-outline-accent" href="javascript:resetPassword();">
            <i class="bi-key"></i>
            @SharedLocalizer["Change Password"]
        </a>

        <a class="btn btn-outline-accent" href="javascript:alert('coming soon');">
            <i class="bi-pass"></i>
            @SharedLocalizer["Configure MFA"]
        </a>
    </div>
}

<div class="alert alert-warning">
    Local account is not secure. It's recommended to use <a href="https://learn.microsoft.com/en-us/azure/active-directory/fundamentals/whatis?WT.mc_id=AZ-MVP-5002809">Microsoft Entra ID</a> for authentication. Click <a href="https://github.com/EdiWang/Moonglade/wiki/Use-Microsoft-Entra-ID-Authentication" target="_blank">here</a> to configure.
</div>

<h4 class="admin-subtitle fw-bold mb-2">
    Last 10 sign in activities
</h4>

@if (null != loginHistoryList && loginHistoryList.Any())
{
    <div class="mb-4 rounded-3 shadow-sm border bg-white p-2">
        <table class="table table-borderless mb-0">
            <thead>
                <tr>
                    <th>@SharedLocalizer["Login IP"]</th>
                    <th>@SharedLocalizer["Login Time (UTC)"]</th>
                    <th>@SharedLocalizer["User Agent"]</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in loginHistoryList.OrderByDescending(p => p.LoginTimeUtc))
                {
                    <tr>
                        <td>@item.LoginIp</td>
                        <td>@item.LoginTimeUtc.ToString(CultureInfo.CurrentCulture)</td>
                        <td>@item.LoginUserAgent</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
}

<div class="modal fade" id="resetPasswordModal" tabindex="-1" role="dialog" aria-labelledby="resetPasswordModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="resetPasswordModalLabel">@SharedLocalizer["Reset Password"]</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>

            <form id="resetpassword-form" method="post">
                <div class="modal-body">
                    <div class="mb-2">
                        <label for="NewPassword">New username</label>
                        <input class="form-control" type="text"
                               id="NewUsername"
                               minlength="3"
                               maxlength="16"
                               name="NewUsername"
                               value="@User.Identity?.Name?.Trim()"
                               pattern="^[A-Za-z0-9]{3,16}$"
                               required>
                        <div class="text-muted">English letters and numbers only.</div>
                    </div>
                    <div class="mb-2">
                        <label for="NewPassword">Old password</label>
                        <input class="form-control" type="password"
                               id="OldPassword"
                               minlength="8"
                               maxlength="32"
                               name="OldPassword"
                               pattern="^(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9._~!@@#$^&*]{8,}$"
                               required>
                    </div>
                    <div class="mb-2">
                        <label for="NewPassword">New password</label>
                        <input class="form-control" type="password"
                               id="NewPassword"
                               minlength="8"
                               maxlength="32"
                               name="NewPassword"
                               pattern="^(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9._~!@@#$^&*]{8,}$"
                               required>
                    </div>
                    <div class="text-muted">
                        Your password must be:
                        <ul>
                            <li>Contain at least one letter (can be either lowercase or uppercase).</li>
                            <li>Contain at least one digit.</li>
                            <li>Be at least 8 characters long.</li>
                            <li>Only contain characters from the set: uppercase letters, lowercase letters, digits, and the special characters <code>._~!@@#$^&*`</code>.</li>
                        </ul>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-outline-accent btn-resetpwd">@SharedLocalizer["Submit"]</button>
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">@SharedLocalizer["Cancel"]</button>
                </div>
            </form>
        </div>
    </div>
</div>
